
<template>
  <div class="business-container">
    <div :id="passvalue" class="chart" />
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'Business',
  props: ['passvalue'],
  data() {
    return {

    }
  },
  mounted() {
    this.getEchartLeft1()
  },
  beforeDestroy() {

  },
  methods: {
    getEchartLeft1() {
      // 实例化对象
      const myChart = echarts.init(document.getElementById(this.passvalue))
      const charts = { // 按顺序排列从大到小
        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车', '医疗互联', '物流行业'],
        cityData: [1500, 1200, 900, 600, 400, 300, 100]
      }

      const top10CityList = charts.cityList
      const top10CityData = charts.cityData
      // let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];

      const lineY = []
      for (let i = 0; i < charts.cityList.length; i++) {
        // let x = i
        // if (x > color.length - 1) {
        //   x = color.length - 1
        // }
        const data = {
          name: charts.cityList[i],
          // color: color[x] + ')',
          value: top10CityData[i]
          // itemStyle: {
          //   normal: {
          //     show: true,
          //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          //       offset: 0,
          //       color: color[x] + ', 0.3)'
          //     }, {
          //       offset: 1,
          //       color: color[x] + ', 1)'
          //     }], false),
          //     barBorderRadius: 10
          //   },
          //   emphasis: {
          //     shadowBlur: 15,
          //     shadowColor: 'rgba(0, 0, 0, 0.1)'
          //   }
          // }
        }
        lineY.push(data)
      }

      // 指定配置和数据
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: '{b0}月存款<br />{c0}元<br />'
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          boundaryGap: true,
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          // axisLine: {
          //   show: false
          // },
          splitLine: {
            show: false
          },
          axisLabel: {
            name: '月份',
            show: true, // 这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle: { // textStyle里面写y轴下的字体的样式
              color: '#fff',
              fontSize: 13
            },
            formatter: '{value}月'
          },
          axisLine: {
            symbolOffset: [10, 0],
            lineStyle: { color: '#05C1FF' }
          }
        }],
        yAxis: [{
          type: 'value',
          // inverse: false,
          splitLine: { lineStyle: { width: 0.5, color: '#FFFFFF' }},
          axisTick: {
            show: false
          },
          axisLine: {
            show: true, // 这里的show用于设置是否显示y轴那一条线 默认为true
            lineStyle: { // lineStyle里面写y轴那一条线的样式
              color: '#05C1FF'
              // width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
            }
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#fff',
              fontSize: 13
            }
          },
          data: top10CityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 13
            },
            formatter: (val) => {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData.reverse()
        }],
        series: [{
          name: '',
          type: 'bar',
          zlevel: 2,
          data: lineY,
          animationDuration: 1500,
          labelLine: {
            show: false,
            showAbove: true
          },
          // barWidth: 30,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 只要修改前四个参数就ok
              offset: 0,
              color: '#05C1FF'
            }, // 柱图渐变色
            {
              offset: 1,
              color: '#0CE2FF'
            }
            ])
            // decal:{}
          },
          label: {
            show: true,
            color: '#FFFFFF',
            position: 'right',
            // rotate: 20,
            formatter: '{c}元'
          },
          showBackground: false

        }]
      }

      // 把配置给实例对象
      myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.business-container {
  display: flex;
  flex-grow: 1;
  .chart {
    flex-grow: 1;
  }
}
</style>
